<style>
  /* 基础样式 */
  .row {
	margin:100px;
    position: relative;
    display: inline-block;
    padding: 10px;
    border: 1px solid #ddd;
    cursor: default;
  }
  
  /* 自定义提示框 */
  .custom-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 180px;
    background: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    border-radius: 4px;
    padding: 5px;
    display: none;
    z-index: 100;
    font-size: 12px;
  }
  .tooltip-content {
    display: flex;
  }
  .tooltip-column {
    flex: 1;
    padding: 0 1px;
  }
  .tooltip-divider {
    width: 1px;
    background: #eee;
    margin: 0 1px;
  }
  .tooltip-title {
    font-weight: bold;
    margin-bottom: 6px;
    color: #333;
  }
  .tooltip-item {
    margin-bottom: 3px;
    color: #666;
  }
  .custom-tooltip:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px;
    border-style: solid;
    border-color: white transparent transparent transparent;
  }
  .row:hover .custom-tooltip {
    display: block;
  }
</style>

<div class="row">
  悬停查看详情
  <div class="custom-tooltip">
    <div class="tooltip-content">
      <div class="tooltip-column">
        <div class="tooltip-title">货物信息</div>
        <div class="tooltip-item">1. 货物名称 2. 货物类型</div>
        <div class="tooltip-item">释放</div>
      </div>
      <div class="tooltip-divider"></div>
      <div class="tooltip-column">
        <div class="tooltip-title">容器信息</div>
        <div class="tooltip-item">2. 容器名称</div>
        <div class="tooltip-item">1. 容器状态</div>
        <div class="tooltip-item">1. 容器状态</div>
        <div class="tooltip-item">1. 容器状态</div>
      </div>
    </div>
  </div>
</div>